<template>
	<view class="find_block">
		<!-- 顶部 -->
		<view class="top_blcok">
			<!-- 搜索框 -->
			<view class="search_block">
				<view class="search_img" @click="goList"></view>
				<input class="weui_input" auto-focus placeholder="请输入你想去的国家或城市" v-model="searchKey" />
			</view>
			<!-- 洲、季节切换 -->
			<view class="search_tab">
				<view v-for="(item,index) in title" :key="index" @click="titleList(item.name)"
					:class="item.name === titleName ? 'active' : ''">{{ item.name }}</view>
			</view>
			<!-- 各州切换 -->
			<view class="zhou_block">
				<view v-for="item in list" :key="item.id" @click="searchList(item.name)"
				class="zhou_name" :class="item.name === areaName ? 'active' : ''">{{ item.name }}</view>
			</view>
		</view>
		<view v-if="titleName  === '洲'" style="height: 100%;background: #f2f2f2;">
			<!-- 各州详情 -->
			<country :europe="europe"></country>
		</view>
		<view v-if="titleName === '季节'" class="jijie">
		<!-- 季节切换 -->
		<jijie :jijieArr="jijieArr" type="jijie"></jijie>
	  </view>
	</view>
</template>

<script>
	import http from "@/utils/http.js";
	import country from '@/components/country/country.vue';
	import jijie from '@/components/jijie/jijie.vue';

	export default {
		data() {
			return {
				title: [{
						id: "1",
						name: "洲"
					},
					{
						id: "2",
						name: "季节"
					},
				],
				zhouList: [{
						id: "1",
						"name": "欧洲"
					},
				 {
						id: "2",
						"name": "亚洲"
					},
					{
						id: "3",
						"name": "大洋洲"
					},
					{
						id: "4",
						"name": "非洲"
					},
					{
						id: "5",
						"name": "北美洲"
					},
					{
						id: "6",
						"name": "南美洲"
					},
				],
				jijieList: [{
					id: "1",
					"name": "春意阑珊"
				}, {
					id: "2",
					"name": "盛夏果实"
				}, {
					id: "3",
					"name": "秋来秋去"
				}, {
					id: "4",
					"name": "冬之恋曲"
				}],
				list: [],
				areaName: '欧洲',
				titleName: '洲',
				europe: [],
				jijieArr: [],
				// 搜索关键字
				searchKey: "" //搜索关键字
			}
		},
		components: {
			country
		},
		onLoad() {
			this.list=this.zhouList;
			this.searchList()
		},
		methods: {
			//跳转到列表页
			goList() {
				uni.navigateTo({
					url: '/pages/list/list?searchKey=' + this.searchKey,
				})
			},
			titleList(ev) {
				if (ev) {
					let list, areaName;
					if (ev === '洲') {
						areaName = this.zhouList[0].name
						list = this.zhouList
					} else {
						areaName = this.jijieList[0].name
						list = this.jijieList
					}
					this.areaName = areaName;
					this.list =list;
					this.titleName=ev
					this.searchList()
				}
			},
			searchList(ev) {
				if (ev) {
					this.areaName=ev
				}
				if (this.titleName === '洲') {
					http.request(`requirement/destination/countries/${encodeURIComponent(this.areaName)}`, "", "get")
						.then(res => {
							this.europe=res.data
						})
				} else {
					http.request(`requirement/request/getMatchedProducts/`, {
						product_type: 1,
						request_season: [this.areaName]
					}, "post").then(res => {
						this.jijieArr=res.data.matchedProducts
					})
				}
			}
		}
	}
</script>

<style>
	uni-page-body {
	  height: 100%;
	}
	.find_block {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	}
	
	.top_blcok {
	  width: 750rpx;
	  background-color: #f2f2f2;
	  position: fixed;
	  height: 280rpx;
	  z-index: 1;
	}
	
	.search_block {
	  position: relative;
	  height: 112.5rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border-bottom: 1px solid #dddcdc;
	}
	
	.search_img {
	  position: absolute;
	  top: 22rpx;
	  left: 110rpx;
	  background-position: -131.25rpx -325.125rpx;
	  display: inline-block;
	  background-image: url("http://www.51houniao.com/wx/customer/classic/images/icon_list.png");
	  background-repeat: no-repeat;
	  width: 65.625rpx;
	  height: 65.625rpx;
	  background-size: 548.4375rpx;
	  vertical-align: middle;
	}
	
	.weui_input {
	  background-color: #fff;
	  width: 76%;
	  height: 70rpx;
	  line-height: 70rpx;
	  border-radius: 40rpx;
	  padding-left: 100rpx;
	  padding-right: 20rpx;
	  box-sizing: border-box;
	}
	
	.search_tab {
	  width: 750rpx;
	  height: 80rpx;
	  display: flex;
	  justify-content: center;
	  line-height: 80rpx;
	  background: #f2f2f2;
	}
	
	.search_tab view {
	  margin: 0 60rpx;
	}
	
	.search_tab .active {
	  border-bottom: 3px solid #445356;
	}
	
	.zhou_block {
	  width: 750rpx;
	  height: 80rpx;
	  background: #CBCACA;
	  font-size: 14px;
	  color: #fff;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  padding: 0 20rpx;
	  box-sizing: border-box;
	}
	
	.zhou_name {
	  width: max-content;
	  height: 48rpx;
	  padding: 0 12rpx;
	  border-radius: 8rpx;
	  line-height: 48rpx;
	}
	
	.jijie_block {
	  height: initial;
	  margin: auto;
	}
	
	.zhou_name.active,
	.jijie_name {
	  background: #878e90;
	}
	
	.jijie {
	  margin-top: 275rpx;
	  background-color: #f2f2f2;
	  width: 100%;
	}

</style>
